<template>
  <view>
    <view class="head">
      <view v-for="(value, index) in list" :key="index" :animation="animationData" ref="dm" class="tm animation" >
        <view>{{ value.name }}</view>
      </view>
    </view>
    <input v-model="value" type="text" name="" placeholder="发送弹幕" id="" />
    <button ref="ss" @click="btnok">发送</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      list: [
        {
          name: 1,
        },
        {
          name: 2,
        },
        {
          name: 3,
        },
        {
          name: 4,
        },
        {
          name: 5,
        },
      ],
       animationData: {}
    };
  },
  onLoad(){
       this.animation = uni.createAnimation() 
  },
  created() {
    console.log(Math.ceil(Math.random() * 200));
    console.log(Math.round(3.1));
  },

  methods: {
    btnok() {
      console.log(this.value);
      let list = this.list;
      list.push({ name: this.value });
      console.log(this.list);

      var than = this;
      console.log(than.$refs.dm);
      for (let item of than.$refs.dm) {
        // console.log(31, (item.$el.style.color = "red"));
        // Math.ceil(Math.random() * 600);
        // item.$el.style.position = "absolute";
        item.$el.style.left = 0;
        item.$el.style.top = Math.ceil(Math.random() * 300) + "px";
       this.animation.translateX(500).step({duration:1000})
          this.animationData = this.animation.export()
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.head {
  position: relative;
  height: 400rpx;
  background-color: skyblue;
}
input {
  margin-top: 600rpx;
  background-color: pink;
}
.tm {
  position: absolute;
  right: 0;
  width: 40rpx;
  height: 40rpx;
  background-color: red;
  z-index: 1;
//   animation-iteration-count: infinite;

}
</style>